<script setup lang="ts">
import { editUserInfo } from '@/api/user';
import type { UserInfo } from '@/api/user/type';
import { ref, type ModelRef } from 'vue';

const userInfo = defineModel("userInfo") as ModelRef<UserInfo>;
const drawer = defineModel("drawer") as ModelRef<Boolean>;

const submit = () => {
    editUserInfo(userInfo.value);
    drawer.value = false;
};

</script>

<template>
    <div>
        <el-drawer v-model="drawer" title="修改用户信息" direction="rtl">
            <div class="row">
                <span>用户名：</span>
                <el-input v-model="userInfo.username" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="row">
                <span>昵称：</span>
                <el-input v-model="userInfo.nickname" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="row">
                <span>性别：</span>
                <el-input v-model="userInfo.sex" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="row">
                <span>邮箱：</span>
                <el-input v-model="userInfo.email" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="row">
                <span>手机号：</span>
                <el-input v-model="userInfo.phone" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="row">
                <span>状态：</span>
                <el-radio-group v-model="userInfo.status">
                    <el-radio :value="1" size="large">正常</el-radio>
                    <el-radio :value="0" size="large">停用</el-radio>
                </el-radio-group>
            </div>
            <div class="row">
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped>
.row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3%;
}
</style>